<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.74</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#000';
        ctx.fillStyle = '#000';
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper functions ---
        function drawResistor(x, y, width, height) {
            ctx.strokeRect(x - width / 2, y - height / 2, width, height);
        }

        function drawCapacitor(x, y, plateDist, plateLen) {
            ctx.beginPath();
            ctx.moveTo(x - plateDist / 2, y - plateLen / 2);
            ctx.lineTo(x - plateDist / 2, y + plateLen / 2);
            ctx.moveTo(x + plateDist / 2, y - plateLen / 2);
            ctx.lineTo(x + plateDist / 2, y + plateLen / 2);
            ctx.stroke();
        }

        function drawGround(x, y) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x, y + 20);
            ctx.moveTo(x - 15, y + 20);
            ctx.lineTo(x + 15, y + 20);
            ctx.moveTo(x - 10, y + 25);
            ctx.lineTo(x + 10, y + 25);
            ctx.moveTo(x - 5, y + 30);
            ctx.lineTo(x + 5, y + 30);
            ctx.stroke();
        }
        
        function drawArrow(fromX, fromY, toX, toY, headLength = 8) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing Logic ---

        // Transistor (NPN)
        const bjtBaseX = 140;
        const bjtY = 150;
        
        // Base
        ctx.beginPath();
        ctx.arc(bjtBaseX - 30, bjtY, 3, 0, 2 * Math.PI); // Input terminal dot
        ctx.fill();
        ctx.moveTo(bjtBaseX - 30, bjtY);
        ctx.lineTo(bjtBaseX, bjtY);
        ctx.stroke();
        ctx.fillText('V', bjtBaseX - 60, bjtY - 5);
        ctx.font = '14px "Times New Roman"';
        ctx.fillText('in', bjtBaseX - 48, bjtY);
        ctx.font = '20px "Times New Roman"';
        
        // Collector/Emitter vertical bar
        ctx.beginPath();
        ctx.moveTo(bjtBaseX, bjtY - 25);
        ctx.lineTo(bjtBaseX, bjtY + 25);
        ctx.stroke();

        // Collector
        ctx.beginPath();
        ctx.moveTo(bjtBaseX, bjtY - 25);
        ctx.lineTo(bjtBaseX, bjtY - 75);
        ctx.stroke();
        
        // Emitter and Node A
        const nodeAX = bjtBaseX + 30;
        const nodeAY = bjtY + 50;
        ctx.beginPath();
        ctx.moveTo(bjtBaseX, bjtY + 25);
        ctx.lineTo(nodeAX, nodeAY);
        ctx.stroke();
        // Emitter arrow
        drawArrow(bjtBaseX + 10, bjtY + 25 + 16.67, bjtBaseX + 15, bjtY + 25 + 25, 10);
        ctx.fillText('A', nodeAX - 15, nodeAY + 15);

        // Emitter resistor to ground
        ctx.beginPath();
        ctx.moveTo(nodeAX, nodeAY);
        ctx.lineTo(nodeAX, nodeAY + 40);
        ctx.stroke();
        drawResistor(nodeAX, nodeAY + 60, 20, 40);
        ctx.beginPath();
        ctx.moveTo(nodeAX, nodeAY + 80);
        ctx.lineTo(nodeAX, nodeAY + 110);
        ctx.stroke();
        drawGround(nodeAX, nodeAY + 110);
        ctx.fillText('1 kΩ', nodeAX + 45, nodeAY + 60);

        // Current IA
        drawArrow(nodeAX, nodeAY + 15, nodeAX, nodeAY + 35);
        ctx.fillText('I', nodeAX + 15, nodeAY + 25);
        ctx.font = '14px "Times New Roman"';
        ctx.fillText('A', nodeAX + 21, nodeAY + 30);
        ctx.font = '20px "Times New Roman"';


        // Coupling Capacitor and Node B
        const capX = nodeAX + 45;
        const capY = nodeAY;
        ctx.beginPath();
        ctx.moveTo(nodeAX, nodeAY);
        ctx.lineTo(capX - 10, capY);
        ctx.stroke();
        drawCapacitor(capX, capY, 10, 25);
        const nodeBX = capX + 10;
        const nodeBY = capY;
        ctx.fillText('B', nodeBX, nodeBY - 18);


        // Coaxial Cable
        const coaxStartX = nodeBX + 10;
        const coaxStartY = nodeBY;
        const coaxLen = 200;
        const coaxRadius = 12;
        
        // Connection to coax
        ctx.beginPath();
        ctx.moveTo(nodeBX, nodeBY);
        ctx.lineTo(coaxStartX, coaxStartY);
        ctx.stroke();
        
        // Coax body
        ctx.beginPath();
        ctx.moveTo(coaxStartX, coaxStartY - coaxRadius);
        ctx.lineTo(coaxStartX + coaxLen, coaxStartY - coaxRadius);
        ctx.moveTo(coaxStartX, coaxStartY + coaxRadius);
        ctx.lineTo(coaxStartX + coaxLen, coaxStartY + coaxRadius);
        ctx.stroke();
        // Coax ends
        ctx.beginPath();
        ctx.arc(coaxStartX, coaxStartY, coaxRadius, -Math.PI/2, Math.PI/2);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(coaxStartX + coaxLen, coaxStartY, coaxRadius, Math.PI/2, -Math.PI/2);
        ctx.stroke();
        
        // Coax label
        ctx.fillText('50 Ω', coaxStartX + coaxLen/2, coaxStartY - 30);
        
        // Coax shield ground
        ctx.beginPath();
        ctx.moveTo(coaxStartX, coaxStartY + coaxRadius);
        ctx.lineTo(coaxStartX, coaxStartY + 50);
        ctx.stroke();
        drawGround(coaxStartX, coaxStartY + 50);
        
        // Current IB
        drawArrow(nodeBX, nodeBY + 25, coaxStartX - 2, nodeBY + 25);
        ctx.fillText('I', nodeBX + 5, nodeBY + 40);
        ctx.font = '14px "Times New Roman"';
        ctx.fillText('B', nodeBX + 11, nodeBY + 45);
        ctx.font = '20px "Times New Roman"';


        // Output and Termination Resistor
        const voutX = coaxStartX + coaxLen + 50;
        const voutY = coaxStartY;
        ctx.beginPath();
        ctx.moveTo(coaxStartX + coaxLen, coaxStartY);
        ctx.lineTo(voutX, voutY);
        ctx.stroke();
        
        ctx.fillText('V', voutX, voutY - 20);
        ctx.font = '14px "Times New Roman"';
        ctx.fillText('out', voutX + 11, voutY - 15);
        ctx.font = '20px "Times New Roman"';
        
        ctx.beginPath();
        ctx.moveTo(voutX, voutY);
        ctx.lineTo(voutX, voutY + 40);
        ctx.stroke();
        drawResistor(voutX, voutY + 60, 20, 40);
        ctx.beginPath();
        ctx.moveTo(voutX, voutY + 80);
        ctx.lineTo(voutX, voutY + 110);
        ctx.stroke();
        drawGround(voutX, voutY + 110);
        ctx.fillText('50 Ω', voutX + 45, voutY + 60);

        // Figure Caption
        ctx.font = 'bold 20px "Times New Roman"';
        ctx.fillText('Fig. 3.74', canvas.width / 2, canvas.height - 30);

    </script>
</body>
</html>